<template>
	<div class="tab-body">
		<el-row class="autoFlex" :gutter="10">
			<el-col :span="4">
				<el-menu
					default-active="0"
					class="el-menu-vertical-demo"
					@select="handleSelect">
					<el-menu-item index="0">
						<span slot="title">全部订单</span>
					</el-menu-item>
					<el-menu-item index="1">
						<span slot="title">待付款</span>
					</el-menu-item>
					<el-menu-item index="2">
						<span slot="title">已付款/待收货</span>
					</el-menu-item>
					<el-menu-item index="3">
						<span slot="title">已发货</span>
					</el-menu-item>
					<el-menu-item index="4">
						<span slot="title">确认收货</span>
					</el-menu-item>
					<el-menu-item index="5">
						<span slot="title">申请退款</span>
					</el-menu-item>
					<el-menu-item index="6">
						<span slot="title">退款成功</span>
					</el-menu-item>
				</el-menu>
			</el-col>
			<el-col :span="18">
				<el-card class="rightCard">
					<div slot="header" class="clearfix"><span>订单信息</span></div>
					<div class="search">
						<el-form ref="form" :model="searchParams" label-width="80px">
							<el-row>
								<el-col :span="6">
									<el-form-item label="用户名称">
										<el-input v-model="searchParams.userName"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="订单号">
										<el-input v-model="searchParams.orderNum"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="快递号">
										<el-input v-model="searchParams.expressNum"></el-input>
									</el-form-item>
								</el-col>
								
								<div class="search-btn">
									<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
									<el-button @click="clearSearchVal">清空</el-button>
								</div>
							</el-row>
						</el-form>
					</div>
					<div class="operator">
						<el-button type="danger" icon="el-icon-delete" @click="batchRemove()" v-has-permission-code-and="'003000250010'">批量删除</el-button>
					</div>
					<div class="dataTable autoFlex">
						<qlh-table class="table" ref="orderTable" :data="listData.records" stripe border height="auto" @selection-change="selectionChange"
						v-loading="listLoading" :tableToolButton="tableToolButton">
							<qlh-table-column type="selection" width="55" fixed="left" ignored :editable="false"></qlh-table-column>
							<qlh-table-column prop="userName" label="用户名"  width="80"></qlh-table-column>
							<qlh-table-column prop="orderNum" label="订单号"  width="80"></qlh-table-column>
							<qlh-table-column prop="expressNum" label="快递号"  width="100"></qlh-table-column>
							<qlh-table-column prop="count" label="订单数量" width="80"></qlh-table-column>
							<qlh-table-column prop="price" label="价格" width="80"></qlh-table-column>
							<qlh-table-column prop="businessName" label="商家" width="60"></qlh-table-column>
							<qlh-table-column prop="address" label="收货地址" width="130"></qlh-table-column>
							<qlh-table-column prop="paymentTime" label="付款时间" width="160"></qlh-table-column>
							<qlh-table-column prop="dictionary_status" label="订单状态" width="80"></qlh-table-column>
							<qlh-table-column label="操作" fixed="right" width="180" ignored :editable="false">
								<template slot-scope="scope">
									<div class="dataTable-operator">
										<el-button v-has-permission-code-and="'003000250005'" size="mini" icon="el-icon-search" @click="toDetail(scope.$index, scope.row)">详情
										</el-button>
										<el-button v-has-permission-code-and="'003000250010'" size="mini" type="danger" icon="el-icon-delete" @click="remove(scope.$index, scope.row)">删除
										</el-button>
									</div>
								</template>
							</qlh-table-column>
						</qlh-table>
						<div class="pageBar">
							<el-pagination @size-change="sizeChange" @current-change="currentChange" :total="listData.total" :page-size="page.size"
							:current-page="page.current" :layout="this.$constant.page.layout" :page-sizes="this.$constant.page.pageSizes"></el-pagination>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<edit ref="edit"></edit>
	</div>
</template>
<script>
	import edit from './edit.vue';
	import api from '@/api/tgb/order/orderInfo.js';
	import qlhTable from '@/components/qlhTable/qlhTable.vue';
	import qlhTableColumn from '@/components/qlhTable/qlhTableColumn.vue';
	export default {
		name: 'department',
		components: {
			edit,
			qlhTable,
			qlhTableColumn
		},
		data() {
			return {
				status: 0,
				listData: [],
				listLoading: false,
				currentNode: {},
				tableLoading: true,
				editParameter: {},
				searchParams: {},
				page: new this.$constant.pageObj(),
				/**
				 * 表格自定义工具栏按钮
				 * name:按钮名
				 * icon:按钮图标
				 * func:按钮点击事件
				 */
				tableToolButton: [{
					name: "customButton",
					icon: "el-icon-arrow-down",
					func: this.customButton
				}],
			};
		},
		methods: {
			//获取数据
			list() {
				this.listLoading = true;
				let params = this.$utils.merger(this.searchParams, this.page,{status: this.status});
				api.list(params, response => {
					this.listData = response.data;
					this.listLoading = false;
				})
			},
			//去详情
			toDetail(index, row) {
				let detailParameter = {
					id: row.id
				};
				this.$refs.edit.open(detailParameter, '订单详情', true);
			},
			//删除
			remove(index, row) {
				let parameter = {
					ids: row.id
				}
				this.$utils.confirm.warning('提示', '确定删除吗？', () => {
					api.remove(
						parameter,
						response => {
							this.$utils.msg.success(response.msg);
							this.list();
						},
						response => {
							this.$utils.msg.warning(response.msg);
						}
					);
				});
			},
			//批量删除
			batchRemove() {
				if (!this.selected || this.selected.length == 0) {
					this.$utils.msg.info('请选择至少一行');
					return;
				}
				let parameter = {
					ids: this.selected
				};
				this.$utils.confirm.warning('提示', '确定删除吗？', () => {
					api.remove(parameter,
						response => {
							this.$utils.msg.success(response.msg);
							this.list();
						},
						response => {
							this.$utils.msg.warning(response.msg);
						}
					);
				});
			},
			handleSelect(key) {
				this.status = key
				this.list()
			},
			//搜索
			search() {
				this.list();
			},
			//清空搜索框
			clearSearchVal() {
				this.searchParams = {};
			},
			//改变选择项
			selectionChange(val) {
				//清空
				this.selected = [];
				for (let item of val) {
					this.selected.push(item.id);
				}
			},
			//改变每页显示数量
			sizeChange(val) {
				this.page.size = val;
				this.list();
			},
			//改变现在的页码
			currentChange(val) {
				this.page.current = val;
				this.list();
			},
		},
		mounted() {
			this.list();
		}
	};
</script>

<style lang="scss" scoped="scoped">
	@import '~common/custom/css/common.scss';
</style>
